import 'dart:convert';
import 'dart:math';

import 'package:bruno/bruno.dart';
import 'package:dashed_rect/dashed_rect.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:graphic/graphic.dart';
import 'package:whale/helper/utils/util.dart';
import '../index.dart';

class FairDataView extends GetView<WatchController> {
  const FairDataView({Key? key}) : super(key: key);



  @override
  Widget build(BuildContext context) {
    const invalidData = [
      {"Date": "04.01.2016", "Close": 126.12},
      {"Date": "05.01.2016", "Close": 125.688},
      {"Date": "06.01.2016", "Close": 119.704},
      {"Date": "07.01.2016", "Close": 120.19},
      {"Date": "08.01.2016", "Close": 121.157},
      {"Date": "11.01.2016", "Close": 117},
      {"Date": "12.01.2016", "Close": 120},
      {"Date": "13.01.2016", "Close": 122},
      {"Date": "14.01.2016", "Close": 117.76},
      {"Date": "15.01.2016", "Close": 114.397},
      {"Date": "18.01.2016", "Close": 116.373},
      {"Date": "19.01.2016", "Close": 120.547},
      {"Date": "20.01.2016", "Close": 113.733},
      {"Date": "21.01.2016", "Close": 114.098},
      {"Date": "22.01.2016", "Close": 123.833},
      {"Date": "25.01.2016", "Close": 125},
      {"Date": "26.01.2016", "Close": 124.866},
      {"Date": "27.01.2016", "Close": 120.264},
      {"Date": "28.01.2016", "Close": 122.296},
      {"Date": "29.01.2016", "Close": 124.502},
      {"Date": "01.02.2016", "Close": 127.936},
      {"Date": "03.02.2016", "Close": 129.95},
      {"Date": "04.02.2016", "Close": 129.275},
      {"Date": "05.02.2016", "Close": 127.898},
      {"Date": "08.02.2016", "Close": 134.9},
      {"Date": "09.02.2016", "Close": 122.819},
      {"Date": "10.02.2016", "Close": 120.108},
      {"Date": "11.02.2016", "Close": 119.447},
      {"Date": "12.02.2016", "Close": 117.8},
      {"Date": "15.02.2016", "Close": 122.8},
      {"Date": "16.02.2016", "Close": 121.865},
      {"Date": "17.02.2016", "Close": 126.3},
      {"Date": "18.02.2016", "Close": 128.259},
      {"Date": "19.02.2016", "Close": 125.724},
      {"Date": "22.02.2016", "Close": 130},
      {"Date": "23.02.2016", "Close": 129.948},
      {"Date": "24.02.2016", "Close": 132.5},
      {"Date": "25.02.2016", "Close": 128.08},
      {"Date": "26.02.2016", "Close": 122},
      {"Date": "29.02.2016", "Close": 122},
      {"Date": "01.03.2016", "Close": 123.449},
      {"Date": "03.03.2016", "Close": 132},
      {"Date": "04.03.2016", "Close": 135},
      {"Date": "07.03.2016", "Close": 123.905},
      {"Date": "08.03.2016", "Close": 125.155},
      {"Date": "09.03.2016", "Close": 126},
      {"Date": "10.03.2016", "Close": 126.778},
      {"Date": "11.03.2016", "Close": 129.656},
      {"Date": "14.03.2016", "Close": 127.64},
      {"Date": "15.03.2016", "Close": 124.786},
      {"Date": "16.03.2016", "Close": 124.469},
      {"Date": "17.03.2016", "Close": 123.5},
      {"Date": "18.03.2016", "Close": 124.061},
      {"Date": "21.03.2016", "Close": 123.5},
      {"Date": "22.03.2016", "Close": 129.002},
      {"Date": "23.03.2016", "Close": 129},
      {"Date": "24.03.2016", "Close": 131.31},
      {"Date": "29.03.2016", "Close": 133},
      {"Date": "30.03.2016", "Close": 129.298},
      {"Date": "31.03.2016", "Close": 127.4},
      {"Date": "01.04.2016", "Close": 122.376},
      {"Date": "04.04.2016", "Close": 119.467},
      {"Date": "05.04.2016", "Close": 120.695},
      {"Date": "06.04.2016", "Close": 118.725},
      {"Date": "07.04.2016", "Close": 127.539},
      {"Date": "08.04.2016", "Close": 129.8},
      {"Date": "20.06.2016", "Close": 127},
      {"Date": "21.06.2016", "Close": 125.594},
      {"Date": "22.06.2016", "Close": 127.438},
      {"Date": "23.06.2016", "Close": 124.44},
      {"Date": "24.06.2016", "Close": 122.131},
      {"Date": "27.06.2016", "Close": 120.53},
      {"Date": "28.06.2016", "Close": 120.296},
      {"Date": "29.06.2016", "Close": 125.877},
      {"Date": "30.06.2016", "Close": 126.404},
    ];
    return Container(
      width: 1.sw,

      margin: EdgeInsets.only(top: 15.r),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '公平指数分析',
            style: TextStyle(
              color: ColorsUtil.title,
              fontWeight: FontWeight.bold,
              fontSize: 16.sp,
            ),
          ),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(2.r),
            ),
            margin: EdgeInsets.only(top: 10.r),

            width: 1.sw,
            height: 280.r,
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.all(12.r),
                  child: Row(
                    children: [
                      Container(
                        width: 12.r,
                        height: 12.r,
                        margin: EdgeInsets.only(right: 5.r),
                        color: const Color(0xffDCE6EF),
                        child:  const DashedRect(
                          gap: 1,
                          strokeWidth: 1.0,
                          color:  Color(0xff94B7D6),
                        ),
                      ),
                      Text(
                        '中位数',
                        style: TextStyle(
                          color: ColorsUtil.title,
                          fontSize: 12.sp,
                        ),
                      ),
                      Container(
                        width: 12.r,
                        height: 12.r,
                        margin: EdgeInsets.only(left: 15,right: 5.r),
                        decoration: BoxDecoration(
                            color: const Color(0xffBDDEFE),
                            border: Border.all(color: Color(0xff017EFF),width: 0.5)
                        ),

                      ),
                      Text(
                        '公平指数',
                        style: TextStyle(
                          color: ColorsUtil.title,
                          fontSize: 12.sp,
                        ),
                      ),
                      Spacer(),
                      GestureDetector(
                        onTap: ()=>EasyLoading.showToast('暂无数据'),
                        child: Row(
                          children: [
                            Image.asset('icon_full.png'.imgPathWatch,width: 12.r,height: 12.r,fit: BoxFit.fill,),
                            SizedBox(width: 5.r,),
                            Text('横屏',style: TextStyle(color: ColorsUtil.subTitle,fontSize: 12.r),)
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                Expanded(child: Chart(
                  data: invalidData,
                  variables: {
                    'Date': Variable(
                      accessor: (Map map) => map['Date'] as String,
                      scale: OrdinalScale(tickCount: 5),
                    ),
                    'Close': Variable(
                      accessor: (Map map) =>
                      (map['Close'] ?? double.nan) as num,
                    ),
                  },
                  marks: [
                    // AreaMark(
                    //   shape: ShapeEncode(value: BasicAreaShape(smooth: true)),
                    //   color: ColorEncode(
                    //       value: Defaults.colors10.first.withAlpha(80)),
                    // ),
                    LineMark(
                        shape: ShapeEncode(value: BasicLineShape(smooth: true)),
                        size: SizeEncode(value: 2.r),
                        color: ColorEncode(
                            value: Color(0xff007EFF)
                        )
                    ),
                  ],
                  axes: [
                    Defaults.horizontalAxis,
                    Defaults.verticalAxis,
                  ],
                  selections: {
                    'touchMove': PointSelection(
                      on: {
                        GestureType.scaleUpdate,
                        GestureType.tapDown,
                        GestureType.longPressMoveUpdate
                      },
                      dim: Dim.x,
                    )
                  },
                  tooltip: TooltipGuide(
                    followPointer: [false, true],
                    align: Alignment.topLeft,
                    offset: const Offset(-20, -20),
                  ),
                  crosshair: CrosshairGuide(followPointer: [false, true]),
                ))
              ],
            ),
          ),
        ],
      ),
    );
  }
}